<script setup>
  defineProps({
    column: {
      type: Object,
      default: () => {}
    }
  });
  function OmitProperty(obj = {}, keys = []) {
    const _obj = { ...obj };
    if (!keys.length) return _obj;
    for (let i = 0, l = keys.length; i < l; i++) {
      const key = keys[i];
      if (Object.hasOwn(_obj, key)) {
        delete _obj[key];
      }
    }
    return _obj;
  }
</script>
<script>
  export default {
    name: 'TableColumn'
  };
</script>

<template>
  <template v-if="column?.children?.length">
    <NstdTableColumn
      :resizable="false"
      :align="column?.align ? column.align : 'center'"
      v-bind="OmitProperty(column, ['children'])"
    >
      <TableColumn v-for="(child, index) in column.children" :column="child" :key="index" />
    </NstdTableColumn>
  </template>
  <NstdTableColumn :resizable="false" :align="column?.align ? column.align : 'center'" v-else v-bind="column">
    <template #default="{ row, $index }">
      <slot v-if="column.scopeSlots" :slot-name="column.prop" :row="row" :index="$index"></slot>
      <component v-else-if="column.render" :is="column.render" :row="row" :index="$index" />
      <span v-else>{{ row[column.prop] }}</span>
    </template>
    <template #header="scope">
      <component v-if="column.headerRender" :is="column.headerRender" :column="scope.column" :index="scope.$index" />
      <slot
        v-else-if="column.headerSlot"
        name="customHeader"
        :slot-name="column.headerSlot"
        :column="scope.column"
        :index="scope.$index"
      ></slot>
      <span v-else>{{ column.label }}</span>
    </template>
  </NstdTableColumn>
</template>

<style scoped lang="scss"></style>
